<template>
  <div class="name">
    <label>{{ TUITranslateService.t(`TUIGroup.群名称`) }}</label>
    <div v-if="isEdit" :class="[!isPC ? 'edit-h5' : '']">
          
      <main class="box">
        <view v-if="!isPC" class="tit" >
          {{ TUITranslateService.t(`TUIGroup.修改群聊名称`) }}
          <span class="close" @click="close">{{
            TUITranslateService.t(`关闭`)
          }}</span>
        </view>
        <view class="intro">{{
              TUITranslateService.t(
                `TUIGroup.修改群聊名称后，将在群内通知其他成员`
              )
            }}</view>
        <div class="input-box">
          <input v-if="isEdit" ref="nameInputRef" v-model="inputGroupName" class="input" type="text"
            @blur="updateProfile">
          <span v-if="!isPC">{{
            TUITranslateService.t(
              `TUIGroup.仅限中文、字母、数字和下划线，2-20个字`
            )
          }}</span>
        </div>
        <footer v-if="!isPC" class="edit-h5-footer">
          <button class="btn" @click="updateProfile">
            {{ TUITranslateService.t(`确认`) }}
          </button>
        </footer>
      </main>
    </div>
    <p v-if="!isEdit || !isPC" @click="close">
      <span>{{ groupProfile.name }}</span>
      <Icon v-if="isAuthor" :file="editIcon" width="14px" height="14px" />
    </p>
  </div>
</template>

<script lang="ts" setup>
  import { watchEffect, ref, nextTick, watch } from '../../../adapter-vue';
  import {
    TUITranslateService,
    IGroupModel,
  } from '@tencentcloud/chat-uikit-engine';
  import Icon from '../../common/Icon.vue';
  import editIcon from '../../../assets/icon/edit.svg';
  import { Toast, TOAST_TYPE } from '../../common/Toast/index';
  import { isPC } from '../../../utils/env';
  import { zxbAjax } from '../../index.ts';
  const props = defineProps({
    data: {
      type: Object,
      default: () => ({}),
    },
    isAuthor: {
      type: Boolean,
      default: false,
    },
  });

  const groupProfile = ref<IGroupModel>({});
  const inputGroupName = ref('');
  const isEdit = ref(false);
  const nameInputRef = ref<HTMLInputElement>(null);
  watchEffect(() => {
    groupProfile.value = props.data;
  });

  const emit = defineEmits(['update']);
  const updateProfile = () => {
    if (!inputGroupName.value) {
      Toast({
        message: TUITranslateService.t('TUIGroup.群名称不能为空'),
        type: TOAST_TYPE.ERROR,
      });
    } else {
      if (inputGroupName.value !== groupProfile.value.name) {
        emit('update', { key: 'name', value: inputGroupName.value });
        groupProfile.value.name = inputGroupName.value;
        inputGroupName.value = '';
        Toast({
          message: TUITranslateService.t('TUIGroup.群名称修改成功'),
          type: TOAST_TYPE.SUCCESS,
        });

        // zxbAjax('/api/crowd/editCrowdInfo',{
        //   group_id: groupProfile.value.groupID,  
        //   name: groupProfile.value.name,
        //   image:groupProfile.value.avatar,
        //   notice: groupProfile.value.notification
        // }, (res1:any)=>{
        //   console.log('res1111---------->', res1)
        // })

      }
      close();
    }
  };

  const close = () => {
    if (props.isAuthor) {
      isEdit.value = !isEdit.value;
    }
    if (isEdit.value) {
      inputGroupName.value = groupProfile.value.name;
    }
  };
  watch(
    () => isEdit.value,
    (newVal : boolean) => {
      if (newVal) {
        nextTick(() => {
          nameInputRef.value?.focus();
        });
      }
    },
  );
</script>

<style lang="scss" scoped>
  @import "../../../assets/styles/common";
  .tit {
    font-size: 34rpx;
    margin-bottom: 20rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: bold;
  }
  
  .close {
    font-size: 28rpx;
    color: #999;
    font-weight: normal;
  }
  .name {
    padding: 14px 20px;
    font-weight: 400;
    font-size: 14px;
    color: #000;
    display: flex;
    flex-direction: column;

    p {
      opacity: 0.6;
      display: flex;
      align-items: center;

      .icon {
        margin-left: 4px;
      }
    }
  }

  .input-box {
    display: flex;

    .input {
      flex: 1;
      border: 1px solid #e8e8e9;
      border-radius: 4px;
      padding: 4px 16px;
      font-weight: 400;
      font-size: 14px;
      color: #000;
      opacity: 0.6;
    }
  }

  .space-top {
    border-top: 10px solid #f4f5f9;
  }

  .edit-h5 {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: flex-end;
    z-index: 1;

    main {
      background: #fff;
      flex: 1;
      padding: 18px;
      border-radius: 12px 12px 0 0;
      width: 80vw;

      .input-box {
        flex-direction: column;
        padding: 18px 0;

        .input {
          background: #f8f8f8;
          padding: 10px 12px;
        }

        span {
          font-family: PingFangSC-Regular;
          font-weight: 400;
          font-size: 12px;
          color: #888;
          letter-spacing: 0;
          padding-top: 8px;
        }
      }
    }

    &-header {
      display: flex;
      align-items: center;
      justify-content: space-between;

      .close {
        font-family: PingFangSC-Regular;
        font-weight: 400;
        font-size: 18px;
        color: #151515;
        letter-spacing: 0;
        line-height: 27px;
      }
    }

    &-footer {
      display: flex;

      .btn {
        flex: 1;
        border: none;
        background: #147aff;
        border-radius: 5px;
        font-family: PingFangSC-Regular;
        font-weight: 400;
        font-size: 16px;
        color: #fff;
        letter-spacing: 0;
        line-height: 27px;
        padding: 8px 0;

        &:disabled {
          opacity: 0.3;
        }
      }
    }
  }
</style>